Passing data between screens

_layout.tsx

Defines the navigation stack (Required) in expo-router. We can provide different screen options here

import { Stack } from "expo-router";
export default function RootLayout() {
    return (
    <Stack>
        <Stack.Screen name="index" options={{ headerShown: false, title: 'Home' }} />
        <Stack.Screen name="ProfileScreen" options={{ title: 'ProfileScreen' }} />
    </Stack>
    );
}
        

index.tsx

import { View, Text, Button } from 'react-native';
import { useRouter } from 'expo-router';

export default function HomeScreen() {
    const router = useRouter();

    return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Welcome to Home Screen</Text>

        <Button 
        title="Go to Profile (Router)" 
        onPress={() => router.push({ pathname: "/ProfileScreen", params: { name: "John Doe" } })}
        />
    </View>
    );
}
        

ProfileScreen.tsx

import { View, Text, Button } from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';

export default function ProfileScreen() {
    const router = useRouter();
    const { name } = useLocalSearchParams();
    return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>This is the Profile Screen {name}</Text>
        
        {/* Go back to Home Screen */}
        <Button title="Go Back" onPress={() => router.back()} />
        </View>
    );
}